<script setup>

const props = defineProps({
  product: {
    type: Object
  }
});
const emit = defineEmits(['addCart', 'minusCart', 'plusCart']);
const plusCart = (goodsID) => {
  emit('plusCart', goodsID)
};
const minusCart = (goodsID) => {
  emit('minusCart', goodsID)
};
const addCart = (goodsID) => {
  emit('addCart', goodsID)
};
</script>

<template>
  <div class="product" v-for="(item, index) in props.product" :key="index">
    <div class="product_img">  <!-- <div class="product_img--min"> -->
      <img :src="`http://www.dell-lee.com/imgs/vue3/`+item.imgName+`.png`" alt="pic">
    </div>
    <div class="product_content">
      <div class="product_content_title">{{ item.title }}</div>
       <div class="product_content_sales">月售 {{ item.sales }} 件</div>
      <slot></slot>
      <div class="product_content_price">￥{{ item.price }} <span class="product_content_old_price">￥{{ item.oldPrice }}</span></div>

    </div>
    <div class="product_number">
      <span class="product_number_minus" @click="minusCart(item.id)">-</span>
      {{ item.number }}
      <span class="product_number_plus" @click="plusCart(item.id)">+</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.product {
  padding: .18rem;
  box-sizing: border-box;
  display: flex;
  position: relative;
  border-bottom: .01rem solid $content-bgColor;

  &_img {
    width: .68rem;
    margin-right: .18rem;

    img {
      width: .68rem;
      height: .68rem;
    }
  }
  &_img--min {
    width: .48rem;
    margin-right: .18rem;

    img {
      width: .48rem;
      height: .48rem;
    }
  }
  &_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &_title {
      font-size: .14rem;
      font-weight: bold;
      color: $content_fontcolor;
      @include ellipse;
    }
    &_price {
      color: $hightlight-fontColor;
    }
    &_old_price {
      color: $light-fontColor;
      text-decoration: line-through;
    }
  }
  &_number {
    position: absolute;
    right: .18rem;
    bottom: .18rem;

    &_minus,&_plus {
      display: inline-block;
      width: .2rem;
      height: .2rem;
      border-radius: 50%;
      font-size: .16rem;
      text-align: center;
    }
    &_minus {
      border: .01rem solid $medium-fontColor;
      color: $medium-fontColor;
      margin-right: .08rem;
    }
    &_plus {
      background-color: $btn-bgColor;
      color: $bgColor;
      margin-left: .08rem;
    }
  }
}
</style>